<template>
  <div id="login">
	<div class="login_container">
		<img class="login_img" :src="headImgUrl || require('_images/avatar.jpg')"/>
		<div class="login_mess">
			<span class="login_text">手机号：</span>
			<input class="login_input" v-model="phoneNumber"/>
		</div>
		<div class="login_mess">
			<span class="login_text">密码：</span>
			<input class="login_input" v-model="password" type="password" />
		</div>
		<div class="login_forget">
			<span class="login_forget_text" @click="show()">忘记密码</span>
		</div>
		<button class="login_button" @click="login()">登录</button>
		<button class="login_button login_button1" @click="toHome()">商城首页</button>
		<!-- <div class="login_register_button" @click="$openRouter({name: 'register'})" >注册</div>
		<img class="login_wx" src='./assets/ic_wachat.png'/>
		<span class="login_wx_text" @click="wxLogin()">微信登陆</span> -->
	</div>
	<errorTip :errorTipVisible.sync="errorTipVisible" :message="errorMessage"/>
  </div>
</template>
<script>
import { setCookie, getCookie } from '../../utils/cookiesUtil.js'
import errorTip from '../../components/errorTip/errorTip'
import '@/utils/rem.js';
import User from '_common/services/user.js'
import getOauth from '_common/getOauth.js'
import {getQuery} from '@/utils/utils'
import axios from 'axios';
export default {
  	name: 'login',
  	data() {
  		return {
			showPassword: false,
			phoneNumber: '',
			password: '',
			errorTipVisible: false,
			errorMessage: '', // 错误信息
			headImgUrl: getCookie('headImgUrl'),
  		}
	},
	props: {

	},
  	computed: {
  	},
    // created() {
    //     const code = getQuery('code');
    //     const state = getQuery('state');
    //     console.log('getCookiet', getCookie('token'));
    //     if(code && state){
    //         axios({
    //             url: 'http://www.nineunity.com/nu/anon/user/oauth2/access',
    //             method: 'post',
    //             data:{
    //                 code,
    //                 state,
    //             },
    //         }).then(res => {
    //             console.log('res:', res);
    //             if (res.data && res.data.code === 0) {
    //                 const { token, weChatUserInfo, hasBind, agencyLevel } =res.data.data;
    //                 const {nickName, headImgUrl } = weChatUserInfo;
    //                 // 把token 和用户信息存在本地
    //                 setCookie('token', token);
    //                 setCookie('nickName', nickName);
    //                 setCookie('headImgUrl', headImgUrl);
	// 				setCookie('agencyLevel', agencyLevel);
    //             }
    //         })
    //     } else {
    //         getOauth()
	// 	}
    // },
  	methods: {
		telValidate() {
			if (this.phoneNumber === '') {
				this.errorMessage = '手机号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.tel(this.phoneNumber)) {
				this.phoneNumber = '';
				this.errorMessage = '手机号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		pasValidate() {
			if (this.password === '') {
				this.errorMessage = '密码不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.pws(this.password)) {
				this.password = ''
                this.errorMessage = '密码应该为6-16位';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		show() {
			this.$openRouter({
				name: 'password',
			})
		},
		login() {
			if(!this.telValidate() || !this.pasValidate()) return false;
			User.userLogin({
					phoneNumber: this.phoneNumber,
					password: this.$md5(this.password)
				}).then(res => {
				if(res.code === 508) {
					this.$alertTip('登录成功～');
				} else if (res.code === 515) {
					this.$alertTip(res.msg || '登录失败, 请检查您的网络');
					return false;
				} else if (res.code !== 0) {
					this.$alertTip(res.msg || '登录失败, 请检查您的网络');
					return false;
				} else {
					this.$alertTip('登录了～');
				}
				this.$openRouter({
					name: 'personalCenter'
				});
			});
		},
		toHome () {
		this.$openRouter({
          name: "home",
        })
		}
	},

    components: {
		errorTip,
    }
}  
</script>

<style lang="less" scoped>

#login {
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
	height: 100%;
	background-color: white;
	.login_container {
		margin-top: 80px;
		width: 540px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.login_img {
			width: 180px;
			height: 180px;
			margin-bottom: 80px;
		}
		.login_mess {
			width: 100%;
			height: 88px;
			box-sizing: border-box;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			align-items: center;
			padding-bottom: 2px;
			.login_text{
				width: 140px;
				display: inline-block;
				text-align: right;
			}
		}
		.login_mess1 {
			border-bottom: 0px solid #eaeaea;
		}
		>div {
			font-size: 30px;
			color: #cccccc;
			.login_input {
				outline: none;  
				border: 0px;
				font-size: 30px;
				color: #cccccc;
				box-sizing: border-box;
			}
			.login_input1 {
				border-bottom: 1px solid #eaeaea;
			}
			.login_forget_text {
				font-size: 26px;
				color: #999999;
			}
		}
		.login_forget {
			display: flex;
			width: 100%;
			justify-content: flex-end;
			margin-top: 16px;
		}
		.login_button {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 86px;
			width: 100%;
			height: 88px;
			border-radius: 8px;
			font-size: 36px;
			font-weight: 500;
			color: white;
			background-color: #f3a13a;
			border: 1px solid transparent;  //自定义边框
			outline: none;    //消除默认点击蓝色边框效果
			&:hover {
				color: #fef5eb;
			}
		}
		.login_button1 {
		margin-top: 20px; 
		color: #f3a13a;
		background-color: white;
		border: 2px solid #f3a13a;
		&:hover {
			color: #f3a13a;
			background-color: #fef5eb;
		}
	}
		.login_register_button {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 32px;
			width: 100%;
			height: 88px;
			border-radius: 8px;
			font-size: 36px;
			font-weight: 500;
			color: #f3a13a;
			border: 2px solid#f3a13a;
			&:hover {
				background-color: #fef5eb;
			}
		}
		.login_wx {
			margin-top: 160px;
			width: 100px;
		}
		.login_wx_text {
			margin-top: 16px;
		}
	}
}

</style>